<template>
  <div class="main">
    <div class="filter-box">
      <div class="filter-left">
        <el-input v-model.trim="value"
                  maxlength="20"
                  style="width: 300px"
                  size="mini"
                  placeholder="请输入标签名称"></el-input>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-search"
                   :disabled="loading"
                   @click="handleSearch">查询</el-button>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-refresh-right"
                   @click="handleReset">重置</el-button>
      </div>
      <div class="filter-right">
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-position"
                   @click="pushScreen">推送水墨屏</el-button>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-plus"
                   @click="handleOpenAddDialog">添加</el-button>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-delete"
                   @click="handDeleteAll">删除</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading"
              stripe
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
              height="100%"
              :data="tableData"
              tooltip-effect="dark"
              align="center"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       fixed="left"></el-table-column>
      <el-table-column label="状态"
                       prop="online"
                       width="100"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon el-icon-message-solid"
             :style="{ color: scope.row.online ? 'green' : 'red',fontSize: '14px',marginRight: '5px'}"></i>
          <span>{{ scope.row.online ? '在线':'离线'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签号"
                       prop="number"
                       min-width="120"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="标签名称"
                       prop="name"
                       min-width="120"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="关联类型"
                       prop="employType"
                       min-width="120"
                       show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.type === 0 ? '资产' : '人员'}}</template>
      </el-table-column>
      <el-table-column label="关联名称"
                       prop="employName"
                       min-width="120"
                       show-overflow-tooltip></el-table-column>
      <!-- <el-table-column label="关联可用性"
                       prop="relAvailability"
                       min-width="120"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span :style="{
                        display: 'inline-block',
                        width: '10px',
                        height:'10px',
                        borderRadius: '50%',
                        backgroundColor: scope.row.relAvailabilityColor
                    }"></span>
          <span>{{scope.row.relAvailabilityName}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item"
                      effect="dark"
                      content="编辑标签"
                      placement="bottom-start">
            <el-button size="mini"
                       type="danger"
                       @click="handleOpenUpdateDialog(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="page-block">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="pageNo"
                     :page-size="pageSize"
                     layout="total, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>
    <!-- 添加/编辑标签  -->
    <el-dialog v-el-drag-dialog
               custom-class="custom-dialog"
               :visible.sync="dialog"
               :title="dialogTitleType"
               width="500px "
               append-to-body>
      <div style="height: 350px">
        <AddItem v-if="dialog"
                 :current-item="currentItem"
                 @succeed="handleSucceedAddOrUpdate"
                 @close="handleCloseDialog" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
// components
import AddItem from './addItem'
import { getTagList, deleteTagList, updateTag } from '@/api/tag'

export default {
  components: {
    AddItem
  },
  data () {
    return {
      value: '',
      tableData: [],
      loading: true,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      selectOptions: [],
      //弹窗
      dialogTitleType: '',
      dialog: false,
      currentItem: null
    }
  },
  created () {
    this.getData()
  },
  methods: {
    //获取数据
    getData () {
      this.loading = true
      let obj = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        value: this.value
      }
      getTagList(obj)
        .then((res) => {
          this.loading = false
          if (res.status != 200) return
          this.tableData = res.obj.records.map(el => {
            let relAvailabilityName = ''
            let relAvailabilityColor = ''
            if (el.employEnabled) {
              relAvailabilityColor = 'green'
              relAvailabilityName = '可用'
            } else {
              relAvailabilityColor = 'red'
              relAvailabilityName = '不可用'
            }
            return { ...el, relAvailabilityName, relAvailabilityColor }
          })
          this.total = res.obj.total
        })
        .catch((error) => {
          this.loading = false
        })
    },
    //查询
    handleSearch () {
      this.pageNo = 1
      this.getData()
    },
    //重置
    handleReset () {
      this.value = ''
    },
    //全选
    handleSelectionChange (val) {
      this.selectOptions = val
    },
    //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
    handleCurrentChange (pageNo) {
      this.pageNo = pageNo
      this.getData()
    },
    // 删除
    handDeleteAll () {
      if (!this.selectOptions.length) return this.$msgPrompt.warning()
      this.$confirm(this.$confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$startLoading()
          deleteTagList(this.selectOptions.map((i) => i.id)).then((res) => {
            this.$endLoading()
            if (res.status != 200) return this.$msgPrompt.error(res.msg)
            this.$msgPrompt.success()
            this.handleSearch()
          })
        })
        .catch(() => {
          this.$msgPrompt.info()
        })
    },
    pushScreen () {
      this.dialogTitleType = '编辑水墨屏'
      this.currentItem = null
      this.dialog = true
    },
    // 开/关弹窗
    handleOpenUpdateDialog (row) {
      this.dialogTitleType = '编辑标签'
      this.currentItem = row
      this.dialog = true
    },
    handleOpenAddDialog () {
      this.dialogTitleType = '添加标签'
      this.currentItem = null
      this.dialog = true
    },
    handleCloseDialog () {
      this.dialog = false
    },
    // 添加/修改成功
    handleSucceedAddOrUpdate () {
      this.dialog = false
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
.main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;

    .el-select {
        width: 200px;
    }
}
</style>
